<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <div>下拉加载更多</div>
    <div class="main" style="height:700px;overflow:auto;">
        <div class="child" style='border:1px solid red;margin-top:20px;color:grey;height:800px'></div>
    </div>
</body>


<script type="text/javascript">
    $(document).ready(function() {
        $(".main").unbind("scroll").bind("scroll", function(e) {
            var sum = this.scrollHeight;
            if (sum <= $(this).scrollTop() + $(this).height()) {
                $(".main").append($(".child").clone());
            }
        });
    });
</script>

</html>

<!-- <script type="text/javascript">
    $(window).scroll(function() {
        //下面这句主要是获取网页的总高度，主要是考虑兼容性所以把Ie支持的documentElement也写了，这个方法至少支持IE8
        var htmlHeight = $(document).height();
        //clientHeight是网页在浏览器中的可视高度，
        var clientHeight = $(window).height();
        //scrollTop滚动条到顶部的垂直高度
        var scrollTop = $(document).scrollTop();
        //通过判断滚动条的top位置与可视网页之和与整个网页的高度是否相等来决定是否加载内容；
        var he = scrollTop + clientHeight;
        if (he >= htmlHeight * 0.9) {
            addListMore();
        }
        //console.log("滚动条位置：" + scrollTop);
        //console.log("可视高度：" + clientHeight);
        //console.log("网页总高度" + htmlHeight);
    });

    function addListMore() {
        console.log("加载更多");
    }
</script> -->